<template>
  <div id="shop">
    <section class="shop_container">
      <div id="goback" @click="Click">
        <img src="../assets/img/return.png" alt="error" />
      </div>
      <header class="shop_detail_header">
        <div class="header_cover_img_con">
          <img src="../assets/img/banner1.jpg" class="header_cover_img" />
        </div>
        <section class="description_header">
          <router-link to="" class="description_top">
            <section class="description_left">
              <img :src="uploads + shop.image" />
            </section>
            <section class="description_right">
              <h4 class="description_title">{{ shop.name }}</h4>
              <p class="description_text">
                商家配送 / {{ shop.order_lead_time }}分钟送达 / 配送费{{
                  shop.delivery_fee
                }}元
              </p>
              <p class="description_promotion ellipsis">
                公告：欢迎光临，用餐高峰期请提前下单，谢谢
              </p>
            </section>
          </router-link>
        </section>
      </header>
      <section class="menu_container">
        <section class="menu_left">
          <van-sidebar v-model="activeKey" @change="onChange">
            <van-sidebar-item
              v-for="(item, index) in categoryList"
              :key="index"
              :title="item.name"
            />
          </van-sidebar>
        </section>
        <section class="menu_right">
          <ul>
            <li v-for="type in foodList" :key="type.id">
              <header class="menu_detail_header">
                <section class="menu_detail_header_left">
                  <strong class="menu_item_title">{{ type.name }}</strong>
                </section>
              </header>
              <section
                class="menu_detail_list"
                v-for="(item, foodIndex) in type.content"
                :key="foodIndex"
              >
                <div class="menu_detail_link">
                  <section class="menu_food_img">
                    <img :src="uploads + item.image" />
                  </section>
                  <section class="menu_food_description">
                    <h3 class="food_description_head">
                      <strong class="description_foodname">{{
                        item.name
                      }}</strong>
                    </h3>
                    <p class="food_description_sale_rating">
                      <span>月售{{ item.recent_order_num }}份</span>
                      <span>好评率{{ item.rating }}%</span>
                    </p>
                  </section>
                </div>
                <footer class="menu_detail_footer">
                  <section class="food_price">
                    <span>{{ item.price }}元</span>
                    <div class="van-stepper">
                      <button
                        class="van-stepper__minus"
                        @click="item.num <= 0 ? 0 : item.num--"
                      ></button>
                      <input
                        type="text"
                        class="van-stepper__input"
                        readonly="readonly"
                        v-model="item.num"
                      />
                      <button
                        class="van-stepper__plus"
                        @click="item.num++"
                      ></button>
                    </div>
                  </section>
                </footer>
              </section>
            </li>
          </ul>
        </section>
      </section>
      <van-submit-bar
        :price="totalNum"
        button-text="提交订单"
        @submit="onSubmit"
      />
    </section>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";

export default {
  name: "shop",
  data() {
    return {
      shop: [],
      categoryList: [],
      foodList: [],
      activeKey: 0,
    };
  },
  methods: {
    Click() {
      this.$router.push("/");
    },
    onChange(index) {
      var element = document.querySelector(".menu_right");
      if (index == 0) {
        element.scrollTo(0, 0);
      } else if (index == 1) {
        element.scrollTo(0, 620);
      } else if (index == 2) {
        element.scrollTo(0, 1240);
      } else if (index == 3) {
        element.scrollTo(0, 1860);
      }
    },
    onSubmit() {
      this.$router.push({
        path: "/confirmOrder",
        query: { id: this.shop.id, price: this.totalNum, index: 1 },
      });
    },
  },
  computed: {
    ...mapState({
      uploads: (state) => state.uploads,
    }),
    totalNum: function () {
      var total = 0;
      for (var i in this.foodList) {
        for (var j in this.foodList) {
          total +=
            this.foodList[i].content[j].price * this.foodList[i].content[j].num;
        }
      }
      return total * 100;
    },
  },
  created() {
    axios.get("/api/shop/shop?id=" + this.$route.params.id).then((response) => {
      this.shop = response.data.data;
    });
    axios.get("/api/category/categoryList").then((response) => {
      this.categoryList = response.data.data;
    });
    axios.get("/api/food/foodList").then((response) => {
      this.foodList = response.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
h3,
h4 {
  margin: 0;
}
.shop_container {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
}
#goback {
  position: fixed;
  z-index: 999;
  img {
    margin-top: 10px;
    margin-left: 10px;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
}
.shop_detail_header {
  position: relative;
  .header_cover_img_con {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    .header_cover_img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
      width: 100%;
      filter: blur(10px);
    }
  }
  .description_header {
    position: relative;
    overflow: hidden;
    z-index: 10;
    padding: 40px 0 20px 50px;
    background-color: rgba(119, 103, 137, 0.43);
    .description_top {
      display: flex;
      .description_left {
        margin-right: 15px;
        img {
          display: block;
          width: 120px;
          height: 100px;
        }
      }
      .description_right {
        flex: 1;
        .description_title {
          width: 100%;
          color: #fff;
          font-size: 18px;
          font-weight: bold;
        }
        .description_text {
          width: 100%;
          color: #fff;
          font-size: 16px;
        }
        .description_promotion {
          width: 100%;
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}
.menu_container {
  position: relative;
  display: flex;
  flex: 1;
  overflow-y: hidden;
  padding-bottom: 50px;
  >>> .van-sidebar-item--select::before {
    background-color: #42a5f3;
  }
  .menu_left {
    background-color: #f7f8fa;
  }
  .menu_right {
    flex: 4;
    overflow-y: auto;
    .menu_detail_header {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      background-color: #f5f5f5;
      .menu_detail_header_left {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        .menu_item_title {
          color: #666;
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
    .menu_detail_list {
      position: relative;
      padding: 10px;
      border-bottom: 1px solid #e6e6e6;
      background-color: #fff;
      overflow: hidden;
      .menu_detail_link {
        display: flex;
        .menu_food_img {
          margin-right: 15px;
          img {
            display: block;
            width: 100px;
            height: 100px;
          }
        }
        .menu_food_description {
          width: 100%;
          .food_description_head {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            .description_foodname {
              color: #333;
              font-size: 18px;
            }
            .food_description_sale_rating {
              span {
                color: #333;
                font-size: 16px;
              }
            }
          }
        }
      }
      .menu_detail_footer {
        display: flex;
        justify-content: space-between;
        margin-left: 115px;
        font-size: 0;
        .food_price {
          display: flex;
          justify-content: space-between;
          width: 100%;
          span {
            font-family: "Helvetica Neue", Tahoma, Arial;
          }
          span {
            color: #f60;
            font-size: 18px;
            font-weight: bold;
          }
          .van-stepper__minus,
          .van-stepper__plus {
            width: 22px;
            height: 22px;
            border: 1px solid #42a5f3;
            border-radius: 100%;
            cursor: pointer;
          }
          .van-stepper__minus {
            background-color: #fff;
            color: #42a5f3;
          }
          .van-stepper__input {
            margin: 0 2px;
            width: 32px;
            height: 22px;
            background-color: transparent;
            cursor: default;
          }
          .van-stepper__plus {
            background-color: #42a5f3;
            color: #fff;
          }
        }
      }
    }
  }
}
>>> .van-submit-bar {
  background-color: #3d3d3f;
}
>>> .van-submit-bar__text {
  color: #fff;
}
>>> .van-submit-bar__price {
  color: #fff;
}
>>> .van-submit-bar__button--danger {
  background: #4cd964;
}
</style>